<template>
  <div>
    <el-card>
      <el-table :data="dataList" border >        
        <el-table-column label="设备号(imei)" prop="imei"></el-table-column>
        <el-table-column label="电池电压" prop="voltage">
          <template slot-scope="scope">
            {{scope.row.voltage / 100}} V
          </template>
        </el-table-column>
        <el-table-column label="信号" prop="csq"></el-table-column>
        <el-table-column label="温度" prop="temperature">
          <template slot-scope="scope">
            {{scope.row.temperature}}℃
          </template>
        </el-table-column>
        <el-table-column label="运行状态" prop="state_txt"></el-table-column>
        <el-table-column label="报警事件" prop="alarm_txt"></el-table-column>
        <el-table-column label="电池状态" prop="battery_txt"></el-table-column>
        <el-table-column label="接警电话" prop="alarm_phone"></el-table-column>
        <el-table-column label="安装地址" prop="address"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" @click="openEvent(scope.row)">历史事件</el-button>
            <el-button type="primary" @click="openProcess(scope.row)">处理记录</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination :total="total" :current-page="query.page" :page-size="query.pageSize" @current-change="changePage"></el-pagination>

      <el-dialog title="历史事件" :visible.sync="eventVisible" append-to-body>
          <event :row="curRow"/>
      </el-dialog>
      <el-dialog title="处理记录" :visible.sync="processVisible" append-to-body>
        <process :row="curRow"/>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {getDeviceByUser} from "@/api/smog/index.js"
import event from "./event.vue"
import process from "./process.vue"
  export default {
    components:{
      event,
      process,
    },
    props:[
      'row'
    ],  
    watch:{
      row:{
        handler:function(val){
          if(val.userid){
            this.query.userid = val.userid;
            this.getData();
          }
        },       
        immediate:true, 
      }
    },
    data(){
      return {
        query:{
          page:1,
          pageSize:10,
          userid:''
        },
        total:0,
        dataList:[],
        eventVisible:false, 
        processVisible:false,
        curRow:{},
      }
    },
    created(){
      this.getData();
    },
    methods:{
      getData(){        
        getDeviceByUser(this.query).then(res=>{
          this.dataList = res.data.data;
          this.total = res.data.total;         
          console.log(res);
        })
      },
      changePage(e){
        this.query.page = e;
        this.getData();
      },
      openProcess(row){
        this.processVisible = true;
        this.curRow = row;
      },
      openEvent(row){
        this.eventVisible = true;
        this.curRow = row;
      }
    }
  }
</script>

<style scoped>

</style>